<template>
  <div class="login-wrapper">
    <div class="login-container">
      <div class="login-form">
        <component
          :is="curFormConfig"
          :formConfig="formConfig"
          @switchForm="handleSwitch"
        />
      </div>
    </div>
    <FooterInfo></FooterInfo>
  </div>
</template>

<script>
import LoginForm from './components/LoginForm.vue'
import ForgetPswForm from './components/ForgetPswForm.vue'
import RegisterForm from './components/RegisterForm.vue'
import FooterInfo from '@/components/FooterInfo'
import {
  FORM_CONFIG_LOGIN,
  FORM_CONFIG_REGISTER,
  FORM_CONFIG_FORGET
} from './config/form'
import mixinConfigSetting from '@/mixins/mixinConfigSetting'
import mixinLogin from './mixins/index'
import TitleLogo from './TitleLogo.vue'

export default {
  mixins: [mixinConfigSetting, mixinLogin],
  components: {
    LoginForm,
    ForgetPswForm,
    RegisterForm,
    FooterInfo,
    TitleLogo
  },
  data() {
    return {
      loading: false,
      curCaptchaPath: '',
      curFormConfig: '',
      formConfig: {}
    }
  },
  created() {
    const { toComponent } = this.$route.query
    switch (toComponent) {
      case 'register':
        this.handleSwitch('register')
        break;
      case 'forget':
        this.handleSwitch('forget')
        break;
      default:
        this.initSetting()
        break;
    }

  },
  methods: {
    initSetting() {
      this.$store.dispatch('user/clearAccountInfo') // 清空用户缓存
      this.handleSwitch('login') // 表单配置
    },
    handleSwitch(type) {
      // 表单switch配置
      switch (type) {
        case 'register':
          this.curFormConfig = 'RegisterForm'
          this.formConfig = FORM_CONFIG_REGISTER
          break
        case 'forget':
          this.curFormConfig = 'ForgetPswForm'
          this.formConfig = FORM_CONFIG_FORGET
          break
        default:
          this.curFormConfig = 'LoginForm'
          this.formConfig = FORM_CONFIG_LOGIN
          break
      }
    }
  }
}
</script>
